Ext.ux.EasyGrid = Ext.extend(Ext.grid.GridPanel, {
			initComponent		: function() {
				this.autoHeight = true;
				this.stripeRows = true;
				this.viewConfig = {
					forceFit	: true
				};

				this.createStore();
				this.createColumns();
				this.createTbar();
				this.createBbar();

				Ext.ux.EasyGrid.superclass.initComponent.call(this);
			},
			
			createStore			: function() {
				this.store = new Ext.data.Store({
							autoLoad	: true,
							proxy		: new Ext.data.MemoryProxy(this.data),
							reader		: new Ext.data.ArrayReader({
										fields	: this.fields
									})
						});
			},

			createColumns		: function() {
				var cols = [];
				for (var i = 0; i < this.fields.length; i++) {
					var f = this.fields[i];
					cols.push({
								header		: f,
								dataIndex	: f
							});
				}
				
				this.columns = cols;
			},

			createTbar			: function() {
				this.tbar = new Ext.Toolbar([{
							text	: 'create',
							iconCls	: 'x-tbar-loading',
							handler	: this.createRecord.createDelegate(this)
						}, {
							text	: 'update',
							iconCls	: 'x-tbar-loading',
							handler	: this.updateRecord.createDelegate(this)
						}, {
							text	: 'remove',
							iconCls	: 'x-tbar-loading',
							handler	: this.removeRecord.createDelegate(this)
						}]);
			},
			
			createBbar			: function() {
				this.bbar = new Ext.PagingToolbar({
							store	: this.store
						});
			},
			
			createRecord		: function() {
				this.showWindow();
				var form = this.getForm();
				form.baseParams = {
					create	: true
				};
				form.setValues(this.getEmptyRecord());
			},

			updateRecord		: function() {
				var r = this.getSelectedRecord();
				if (r != false) {
					this.showWindow();
					var form = this.getForm();
					form.baseParams = {
						create	: false
					};
					form.loadRecord(r);
				}
			},

			removeRecord		: function() {
				var r = this.getSelectedRecord();
				if (r != false) {
					this.getStore().remove(r);
				}
			},

			getSelectedRecord	: function() {
				var sm = this.getSelectionModel();
				if (sm.getCount() == 0) {
					Ext.Msg.alert('Info', 'Please select one row.');
					return false;
				} else {
					return sm.getSelections()[0];
				}
			},

			getEmptyRecord		: function() {
				var r = {};
				for (var i = 0; i < this.fields.length; i++) {
					var f = this.fields[i];
					r[f] = '';
				}
				return r;
			},

			submitRecord		: function() {
				var form = this.getForm();
				var values = form.getFieldValues();
				if (form.baseParams.create) {
					var data = [];
					for (var name in values) {
						data.push(values[name]);
					}
					this.store.loadData([data], true);
				} else {
					var r = this.getSelectedRecord();
					r.beginEdit();
					for (var name in values) {
						r.set(name, values[name]);
					}
					r.endEdit();
				}
				this.hideWindow();
			},

			getForm				: function() {
				return this.getFormPanel().getForm();
			},

			getFormPanel		: function() {
				if (!this.gridForm) {
					this.gridForm = this.createForm();
				}
				return this.gridForm;
			},

			createForm			: function() {
				var items = [];
				for (var i = 0; i < this.fields.length; i++) {
					var f = this.fields[i];
					items.push({
								fieldLabel	: f,
								name		: f
							});
				}

				var form = new Ext.form.FormPanel({
							frame				: true,
							defaultType			: 'textfield',
							buttonAlign			: 'center',
							labelAlign			: 'right',
							labelWidth			: 70,
							trackResetOnLoad	: true,
							reader				: new Ext.data.ArrayReader({
										fields	: this.fields
									}),
							items				: items,
							buttons				: [{
										text	: 'submit',
										handler	: this.submitRecord.createDelegate(this)
									}, {
										text	: 'reset',
										handler	: function() {
											form.getForm().reset();
										}
									}]
						});
						
				return form;
			},

			showWindow			: function() {
				this.getWindow().show();
			},

			hideWindow			: function() {
				this.getWindow().hide();
			},

			getWindow			: function() {
				if (!this.gridWindow) {
					this.gridWindow = this.createWindow();
				}
				return this.gridWindow;
			},

			createWindow		: function() {
				var formPanel = this.getFormPanel();

				var win = new Ext.Window({
							title		: 'Info',
							closeAction	: 'hide',
							modal		: true,
							items		: [formPanel]
						});

				return win;
			}
		});